<template>
  <el-menu-item
    v-if="hasOneShowingChild(item.children, item) && !onlyOneChild.children && !item.hidden"
    :index="item.path"
    @click="hanndleActiveIndex"
  >
    <!-- <svg-icon :icon-class="onlyOneChild.meta.icon" /> -->
    <template #title>
      <span class="aside-menu-title">{{ onlyOneChild.meta.title }}</span></template
    >
  </el-menu-item>
  <!-- 嵌套菜单 -->
  <el-submenu v-else-if="!item.hidden" :index="item.path">
    <!-- 有子级 -->
    <template #title>
      <!--  <svg-icon :icon-class="item.meta.icon" /> -->
      <router-link
        style="text-decoration: none; color: rgb(48, 49, 51); display: inline-block; width: 100%"
        v-if="showRouterLink(item.path)"
        :to="item.path"
      >
        <span class="aside-menu-title">
          {{ item.meta.title }}
        </span>
      </router-link>
      <span class="aside-menu-title" v-else>{{ item.meta.title }}</span>
    </template>
    <div v-if="item.children[1]?.name == '机电设备' ? item.children.splice(1, 1) : item.children">
      <sub-item :key="child.path" v-for="child of item.children" :item="child" />
    </div>
  </el-submenu>
</template>

<script lang="ts">
import { filter } from 'lodash'
import { ObjectType } from 'typings/interfaces'
import { computed, defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'subItem',
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  setup() {
    const onlyOneChild = ref<ObjectType>({})
    const hasOneShowingChild = (children: any = [], parent: ObjectType) => {
      const showingChildren = filter(children, (item: ObjectType) => {
        if (item.hidden) {
          return false
        } else {
          onlyOneChild.value = item
          return true
        }
      })

      // 只有一个子路由，不显示父路由
      const arr = ['投后管理', '人员信息', '资产信息', '路面', '交安', '绿化'] //子路由名称数组
      if (showingChildren.length === 1 && arr.includes(showingChildren[0].name)) {
        return true
      }

      // Show parent if there are no child router to display
      if (showingChildren.length === 0) {
        onlyOneChild.value = parent
        return true
      }

      return false
    }
    const routerLinkList = ref<string[]>([
      '/budget/construction/research',
      '/basedata/budget/construction/research',

      '/budget/construction/digital',
      '/basedata/budget/construction/digital',

    ])
    const showRouterLink = (path: string) => {
      return routerLinkList.value.includes(path)
    }
    const store = useStore()
    const activeIndex = computed(() => store.getters.menuActiveIndex)
    return {
      onlyOneChild,
      hasOneShowingChild,
      showRouterLink,
      activeIndex,
      hanndleActiveIndex: (e) => {
        store.commit('saveMenuActiveIndex', e.index)
      },
    }
  },
})
</script>
